<template>
  <div class="xnh">
    <section slot="cRight"></section>
    <Card title="业务开通">
      <Table :tableData="tableDataA" @blur="handleBlur"></Table>
    </Card>
    <Card title="选择产品">
      <el-checkbox-group v-model="paneC.checkedOptionsA" :max="2">
        <el-checkbox
          v-for="(option, index) in paneC.optionsA"
          :label="option"
          :key="index"
          :disabled="option === '省内互联网专线'"
        >
          {{ option }}
        </el-checkbox>
      </el-checkbox-group>
      <Card :title="paneC.checkedOptionsA[0]" style="margin-top: 20px">
        <Card title="产品属性">
          <div slot="cRight">
            <el-button size="mini" type="primary">
              <a
                href="http://119.23.15.173/down/%E8%AE%A2%E5%8D%95%E6%A8%A1%E6%9D%BF.xlsx"
                >订单模版下载</a
              >
            </el-button>
            <el-button size="mini" type="primary" @click="uploadA = true"
              >订单模版导入</el-button
            >
          </div>
          <Table :tableData="paneC.tableDataA" selection />
        </Card>
      </Card>
      <Card
        v-if="paneC.checkedOptionsA[1]"
        :title="paneC.checkedOptionsA[1]"
        style="margin-top: 20px"
      >
        <Card title="产品属性">
          <div slot="cRight">
            <el-button size="mini" type="primary">
              <a
                href="http://119.23.15.173/down/%E8%AE%A2%E5%8D%95%E6%A8%A1%E6%9D%BF.xlsx"
                >订单模版下载</a
              >
            </el-button>
            <el-button size="mini" type="primary" @click="upload = true"
              >订单模版导入</el-button
            >
          </div>
          <Table :tableData="paneC.tableDataAA" selection />
        </Card>
      </Card>
    </Card>

    <Card title="其他信息">
      <Table :tableData="paneC.tableDataC"></Table>
    </Card>

    <!-- 订单模板导入 -->
    <el-dialog
      title="订单模板导入"
      :visible.sync="upload"
      width="60%"
      top="6vh"
      style="paddingbottom: 50px"
    >
      <el-upload
        class="upload-demo"
        drag
        action="https://jsonplaceholder.typicode.com/posts/"
        multiple
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      </el-upload>
      <span slot="footer">
        <el-button @click="upload = false">取 消</el-button>
        <el-button
          type="primary"
          @click="
            upload = false
            handleChange()
            $message({
              message: '上传成功',
              type: 'success'
            })
          "
          >确 定</el-button
        >
      </span>
    </el-dialog>

    <!-- 订单模板导入 -->
    <el-dialog
      title="订单模板导入"
      :visible.sync="uploadA"
      width="60%"
      top="6vh"
      style="paddingbottom: 50px"
    >
      <el-upload
        class="upload-demo"
        drag
        action="https://jsonplaceholder.typicode.com/posts/"
        multiple
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      </el-upload>
      <span slot="footer">
        <el-button @click="uploadA = false">取 消</el-button>
        <el-button
          type="primary"
          @click="
            uploadA = false
            handleChangeA()
            $message({
              message: '上传成功',
              type: 'success'
            })
          "
          >确 定</el-button
        >
      </span>
    </el-dialog>

    <section>
      <el-button
        type="primary"
        style="float: right"
        @click="
          $message({
            message: '提单成功，订单号为D523489',
            type: 'success'
          })
        "
        >确认提单</el-button
      >
    </section>
  </div>
</template>

<script>
import Card from '@/components/Card'
import Table from '@/components/Table'
export default {
  components: {
    Card,
    Table
  },

  data() {
    return {
      upload: false,
      uploadA: false,
      tableDataA: {
        col: [
          {
            prop: 'colA',
            label: '客户名称',
            type: 'Input'
          },
          {
            prop: 'colB',
            label: '客户编码',
            type: 'Input'
          },
          {
            prop: 'colC',
            label: '客户所在地',
            type: 'Input'
          },
          {
            prop: 'colD',
            label: '是否VIP',
            type: 'Input'
          }
        ],
        row: [
          {
            colA: '',
            colB: '',
            colC: '',
            colD: ''
          }
        ]
      },
      paneC: {
        checkedOptionsA: ['省内互联网专线'],
        optionsA: ['虚拟号云视讯', '固话云视讯', '省内互联网专线'],
        tableDataA: {
          col: [
            {
              prop: 'colA',
              label: '月功能费'
            },
            {
              prop: 'colB',
              label: '保障等级'
            },
            {
              prop: 'colC',
              label: '最大时延要求'
            },
            {
              prop: 'colD',
              label: '带宽'
            },
            {
              prop: 'colE',
              label: '接入方式'
            },
            {
              prop: 'colF',
              label: 'A端省'
            },
            {
              prop: 'colG',
              label: 'Z端省'
            }
          ],
          row: [
            {
              colA: '126元',
              colB: 'AAA',
              colC: '1000',
              colD: '2G',
              colE: 'OTN',
              colF: '四川',
              colG: '重庆'
            },
            {
              colA: '100元',
              colB: 'AAA',
              colC: '1000',
              colD: '1G',
              colE: 'OTN',
              colF: '宁夏',
              colG: '北京'
            }
          ]
        },
        tableDataAA: {
          col: [
            {
              prop: 'colA',
              label: '序号'
            },
            {
              prop: 'colB',
              label: '云视讯号码',
              type: 'Input'
            },
            {
              prop: 'colC',
              label: '号码归属省'
            },
            {
              prop: 'colD',
              label: '预占单流水号',
              type: 'Input'
            },
            {
              prop: 'colE',
              label: '语音AI功能',
              type: 'Input'
            },
            {
              prop: 'colF',
              label: '产品资费',
              type: 'Input'
            },
            {
              prop: 'colG',
              label: '一次性资费',
              type: 'Input'
            }
          ],
          row: []
        },
        tableDataC: {
          col: [
            {
              prop: 'colA',
              label: '客户经理名称'
            },
            {
              prop: 'colB',
              label: '客户经理电话'
            }
          ],
          row: []
        }
      }
    }
  },
  methods: {
    handleBlur() {
      this.tableDataA.row = [
        {
          colA: '方剂公司',
          colB: 'A3312555423',
          colC: '北京',
          colD: '是'
        }
      ]
      this.paneC.tableDataC.row = [
        {
          colA: '李丽',
          colB: '13584562399'
        }
      ]
    },
    handleChange() {
      this.paneC.tableDataAA.row = [
        {
          colA: '1',
          colB: '280000001',
          colC: '四川',
          colD: '1234567',
          colE: '无',
          colF: '128元',
          colG: ''
        },
        {
          colA: '2',
          colB: '280000002',
          colC: '四川',
          colD: '1234568',
          colE: '无',
          colF: '128元',
          colG: ''
        }
      ]
    },
    handleChangeA() {
      this.paneC.tableDataA.row = [
        {
          colA: 'A3211322',
          colB: '是',
          colC: '2000',
          colD: 'CMPP3.0',
          colE: '127.3.21.10',
          colF: '200',
          colG: '是',
          colH: '总部A',
          colI: '90条每秒',
          colJ: '',
          colK: 'http://112.35.1.155.8086',
          colL: '',
          colM: '2020.10.4',
          colN: '市场部'
        },
        {
          colA: 'A3621412',
          colB: '是',
          colC: '1000',
          colD: 'CMPP3.0',
          colE: '127.3.21.14',
          colF: '100',
          colG: '是',
          colH: '总部B',
          colI: '100条每秒',
          colJ: '',
          colK: 'http://112.35.1.155.8087',
          colL: '',
          colM: '2020.10.5',
          colN: '市场部'
        }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
a {
  text-decoration: none;
  color: #fff;
}
/deep/.el-dialog__body {
  text-align: center;
}
</style>
